<script lang="ts" setup>
import { onMounted, ref } from 'vue'
// import pkg from '~/package.json' // 根据文件位置调整路径
// import logo from '~/public/assets/logo.svg'
import pkg from '../../package.json'

definePageMeta({
  title: '关于我们', // 自定义元信息
  requiresAuth: false, // 其他自定义元信息
  layout: 'default', // 指定布局
  keepalive: true,
})

const dependencies = ref<{ [key: string]: string }>({})

onMounted(async () => {
  dependencies.value = {
    ...pkg.devDependencies,
  }
})

function tohome() {
  window.open('https://gitee.com/9658065/ImgToPdf/')
}
</script>

<template>
  <div class="about h-full w-full overflow-y-auto text-center">
    <el-image
      class="logo pt-4"
      style="padding: 5px; width: 150px; height: 150px"
      src="/assets/logo.svg"
      @click="tohome()"
    />
    <h1>关于 <span class="logo" @click="tohome()">灵驹PDF</span></h1>
    <p class="pl-8 pr-8">
      灵驹PDF是一个将图片转换为PDF的工具，还可以通过页面复制的方式进行PDF文件分拆、合并。项目基于Vitesse for Nuxt 3开发，大量复制、借鉴、参考了
      vue-pure-admin，频繁使用Cursor、通义千问、Kimi。
    </p>
    <p>
      Logo来自<a
        target="_blank"
        href="https://www.iconfont.cn/collections/detail?spm=a313x.user_detail.i1.dc64b3430.5ac63a81nrxJ14&cid=21652"
      >盛馨馨向上</a>。
    </p>
    <el-divider />
    <div class="pl-8">
      <p>本项目使用了以下依赖组件：</p>

      <ul class="pl-8 text-left">
        <li v-for="(value, key) in dependencies" :key="key">
          {{ key }}: {{ value }}
        </li>
      </ul>
    </div>
  </div>
</template>

<style scoped>
.logo:hover {
  cursor: pointer;
  background-color: var(--el-color-primary-light-9);
}

.about h1 {
  color: #333;
}

.about ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  padding: 0;
  list-style-type: none;
}

.about li {
  margin: 5px 0;
  width: 25%; /* 每列占 25% */
  box-sizing: border-box; /* 包含内边距和边框 */
  padding: 5px;
}
</style>
